<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')" align-center
             :close-on-click-modal="false">
    <el-main>
      <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="550">
        <el-table-column width="1"></el-table-column>
        <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column label="业务日期" prop="business_date" align="center"></el-table-column>
        <el-table-column label="单据编号" prop="contract.contract_code" align="center"></el-table-column>
        <el-table-column label="业务类型" prop="type" align="center">
          <template #default="scope">
            {{ scope.row.type == 1 ? '销售订单' : scope.row.type == 2 ? '销售退货' : '其他' }}
          </template>
        </el-table-column>
        <el-table-column label="期别" prop="money" align="center">
          <template #default="scope">
            <div v-for="item in stages_all" :key="item.stages_number">
              {{ scope.row.stages_number == item.stages_number ? item.type : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="欠款总额" prop="money" align="center"></el-table-column>
        <el-table-column label="收回欠款" prop="pay_money" align="center"></el-table-column>
        <el-table-column label="应收欠款" prop="only_money" align="center"></el-table-column>
        <el-table-column label="备注" prop="remark" align="center"></el-table-column>
      </scTable>
    </el-main>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    query: {type: Object, default: () => ({})},
  },
  emits: ['success', 'closed'],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: '新增账户',
        edit: '欠款单据',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      apiObj: this.$API.finance.receivable.detail,
      selection: [],
      stages_all: [
        {stages_number: 0, type: '一次性',},
        {stages_number: 1, type: '首期金额',},
        {stages_number: 2, type: '二期金额',},
        {stages_number: 3, type: '三期金额',},
        {stages_number: 4, type: '四期金额',},
        {stages_number: 5, type: '五期金额',},
        {stages_number: 6, type: '六期金额',},
        {stages_number: 7, type: '七期金额',},
        {stages_number: 8, type: '八期金额',},
        {stages_number: 9, type: '九期金额',},
        {stages_number: 10, type: '十期金额',},
        {stages_number: 11, type: '十一期金额',},
        {stages_number: 12, type: '十二期金额',},
      ],
    }
  },
  mounted() {
  },
  methods: {
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    submit() {
      this.$emit('success', this.selection)
      this.visible = false
    },
    selectionChange(selection) {
      this.selection = selection;
    },
  }
}
</script>

<style></style>
